<template>
  <div class="editor" ref="divRef">
    <!-- <n-button @click="getHtml11" type="primary" ghost>
        保存数据
    </n-button> -->
      
    <div class="aie-container">
      <div class="aie-container-header" />
      <div class="aie-container-main" />
      <div class="aie-container-footer" />
    </div>
  </div>
</template>
 
<script setup>
import { AiEditor } from "aieditor"
import "aieditor/dist/style.css"
import { onMounted, onUnmounted, ref, watch,watchEffect } from "vue"
// 需要下载element-plus
// import { ElMessage } from "element-plus"

// https://aieditor.com.cn/docs/zh/config/image.html   富文本文档地址
 
const $emit = defineEmits(["change","uploadImage"])
 
const $props = defineProps(["value","token","Image"])
 
const divRef = ref()
 
let aiEditor = null

watchEffect(() => {
  
  if($props.Image){
    appendImageFromUrl($props.Image)
  }
});

const appendImageFromUrl = (url) => {
    // const editor = divRef.value;
    aiEditor.focus().insert(
        `<img src="${url}"></img>`
    )

    // $emit("change", aiEditor.getHtml())
    
}

const getHtml11 = (item) => {
    $emit("change", aiEditor.getHtml())
    
}

onMounted(() => {
    
    init()
})
 
const init = () => {
  aiEditor = new AiEditor({
    element: divRef.value,
    
    placeholder: "点击输入内容...",
    // 是否可以拖拽编辑框
    draggable: false,
    // 排除部分工具
    toolbarExcludeKeys: [
      "brush",
      "eraser",
      "link",
      "code",
      "todo",
      "emoji",
      "video",
      "ai",
      "video",
      "printer",
      "source-code",
      "attachment",
      "quote",
      "container",
      "code-block",
      "table"
    ],
    image: {
         
    //   // 图片上传接口
    //   uploadUrl: "http://192.168.203.1:8090/basic-api/uploading",
    //   uploadFormName: "file",
    //   // 请求头
    //   uploadHeaders: {
    //     authorization: $props.token
    //   },
    //   uploaderEvent: {
    //     onSuccess: (_file, response) => {
    //         console.log(response)
    //       if (response.code == 200) {
    //      // 后端接口返回数据不符合规定格式时，自定义返回数据
    //         return {
    //           errorCode: 0,
    //           data: {
    //            // 上传成功接口返回的图片地址
    //             src: response.data.fileUrl,
    //             width: "auto",
    //             height: "200px",
    //             class: "image_class",
    //             loading: true
    //           }
    //         }
    //       }
    //     },
    //     onFailed: () => {
    //     //   ElMessage.error("图片上传失败")
    //     },
    //     onError: () => {
    //     //   ElMessage.error("图片上传错误")
    //     }
    //   },
    //     //   弹框
    //    customMenuInvoke: (editor: AiEditor) => {
    //     },
    //   bubbleMenuItems: ["delete"]

        allowBase64: true,
        // defaultSize: 350,
        customMenuInvoke: (editor) => {
         
            $emit("uploadImage", true)
           
        },
         
        uploader: (file, uploadUrl, headers, formName) => {
            console.log(file, uploadUrl, headers, formName)
            //可自定义图片上传逻辑
        },
       
        bubbleMenuItems: ["AlignLeft", "AlignCenter", "AlignRight", "delete"]
    },
    onChange: (aiEditor) => {
      // 监听到编辑器内容发生变化了，控制台打印编辑器的 html 内容...
      // 向父组件传值
      if (aiEditor.getHtml() == "<p></p>") {
        $emit("change", "")
      } else {
        $emit("change", aiEditor.getHtml())
      }
    }
  })
 
  // 初始值回显
  if ($props.value) {
    aiEditor.focus().insert($props.value)
  }
}
 

watch(
  () => $props.value,
  (v) => {
    
    if (!v) {
      aiEditor?.clear()
      $emit("change", undefined)
    }
  },

   
  {
    immediate: true
  }
)
 
onUnmounted(() => {
  aiEditor && aiEditor.destroy()
})
</script>
 
<style lang="scss" scoped>
.editor {
  width: 100%;
}
 
.aie-container-main {
  height: 600px;
  overflow-y: auto;
}
 
.aie-container-footer {
  display: none;
}
</style>